<template>
  <div class="goods">
    <div class="breadcrumb-wrap">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="inpt-wrap">
      <el-input
        placeholder="请输入内容"
        style="width:350px;margin-right:15px;"
        clearable
        v-model="goodsListsParams.query"
        @keyup.enter.native="search"
      >
        <el-button slot="append" icon="el-icon-search" @click.native="search"></el-button>
      </el-input>
      <el-button type="primary" @click="addGoods">添加商品</el-button>
    </div>

    <div class="table-wrap">
      <el-table :data="goods.goods" border style="width: 100%;margin-bottom:20px;" max-height="400">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="180"></el-table-column>
        <el-table-column prop="goods_price" label="商品价格（元）" width="180"></el-table-column>
        <el-table-column prop="goods_weight" label="商品重量"></el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            <span>{{scope.row.add_time | dealCreateDate}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="_editUser(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
              @click="_deleteUser(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="+goodsListsParams.pagenum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="goodsListsParams.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="goods.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getGoodsLists
} from "@/http/api";
import moment from "moment";
export default {
  data() {
    return {
      goodsListsParams: {
          query: '',
          pagenum: 1,
          pagesize: 10
      },
      goods: {
        total: 0
      },

    };
  },
  methods: {
      //获取商品列表
    getGoodsLists() {
        getGoodsLists(this.goodsListsParams)
        .then(res => {
            this.goods = res.data
        })
    },
    //分页大小发生变化时触发
    handleSizeChange(val) {
        console.log(val)
        this.goodsListsParams.pagesize = val
        this.getGoodsLists()
    },
    //分页页码发生变化时触发
    handleCurrentChange(val) {
        console.log(val)
        this.goodsListsParams.pagenum = val
        this.getGoodsLists()
    },
    //搜索
    search() {
        this.getGoodsLists()
    },
    //添加商品
    addGoods() {
        this.$router.push({
            name: 'goodsadd'
        })
    }

  },
  created() {
    this.getGoodsLists()
  }
};
</script>
<style scoped lang="stylus">
.goods
  padding 15px
  background #fff
  border-radius 10px
  .breadcrumb-wrap
    margin-bottom 20px
  .inpt-wrap
    display flex
    justify-content flex-start
    margin-bottom 20px
</style>